.custom-html {
  width: 100%;
  height: 100%;
  background: #333232;
  border-radius: 1em;
  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%), 0 0.02125em 0.06125em rgb(0 0 0 / 25%);
  perspective: 600px;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: #333232 linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
    border-radius: 0 0 1em 1em;
    transform: rotateX(180deg);
    transform-origin: center top;
    transition: 0.7s ease-in-out transform;
    content: ' ';
  }
}

.normal-html {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #383838;
  border-radius: 1em;
  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%), 0 0.02125em 0.06125em rgb(0 0 0 / 25%);
  perspective: 600px;
  // padding: 10px;
  .normal-header {
    padding: 2px 10px 2px;
    background-color: #df6969;
    border-radius: 1em 1em 0 0;
  }
  .normal-body {
    padding: 10px;
    font-size: 20px;
    background-color: #383838;
    border-radius: 0 0 1em 1em;
  }
  z-index: -2;
  .bar {
    float: left;
    width: 15px;
    height: 6px;
    border-radius: 2px;
    background-color: #4b9cdb;
  }
}
@keyframes loadingJ {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(120px, 0);
    // background-color: #f5634a;
    width: 25px;
  }
}

.normal-header .bar {
  animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.judge-html {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #383838;
  border-radius: 1em;
  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%), 0 0.02125em 0.06125em rgb(0 0 0 / 25%);
  perspective: 600px;
  // padding: 10px;
  .normal-header {
    padding: 2px 10px 2px;
    background-color: #17beec;
    border-radius: 1em 1em 0 0;
  }
  .normal-body {
    padding: 10px;
    font-size: 20px;
    background-color: #383838;
    border-radius: 0 0 1em 1em;
  }
  z-index: -2;
}

.x6-widget-selection-box {
  box-sizing: border-box !important;
  margin-top: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border: 4px solid #feb663;
  border-radius: 1em;
  // z-index: -1;
  // box-shadow: 2px 2px 5px #d3d3d3;
}

.x6-widget-selection {
  // z-index: -1;
}

.x6-node-selected .node {
  border-color: #1890ff;
  border-radius: 1em;
  box-shadow: 0 0 0 3px #1890ff;
  z-index: 100;
}

.x6-node-selected .node.success {
  border-color: #52c41a;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #ccecc0;
}

.x6-node-selected .node.failed {
  border-color: #ff4d4f;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #fedcdc;
}

// .x6-edge-selected path:nth-child(2) {
//     stroke: #1890ff;
//     stroke-width: 2px !important;
//     // fill: blue;
//     // marker {
//     //     fill: blue;
//     // }
// }

#contextMenu {
  position: absolute;
  box-shadow: 1px 2px 5px #aaaaaa;
  border: 1px solid #c6c6c6;
  list-style: none;
  padding: 0;

  li {
    padding: 4px 14px;
    background: white;
    cursor: pointer;
    color: #444444;
  }
}
